<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
        }
        
        h3 {
            border-bottom: 1px solid #ccc;
        }
        
        textarea {
            width: 594px;
            height: 300px;
        }
        
        button {
            width: 600px;
            height: 50px;
        }
        
        .doc {
            border: 1px solid orange;
            min-height: 100px;
            margin-bottom: 10px;
        }
        
        .item {
            clear: both;
            box-sizing: border-box;
            width: 100%;
            line-height: 40px;
            text-indent: 10px;
            color: #000;
            font-size: 12px;
            min-height: 40px;
            border: 1px solid #ccc;
            border-bottom: 0;
            border-bottom: 1px dotted skyblue;
        }
        
        .delete_btn {
            float: right;
            z-index: 10;
            display: block;
            margin-top: 2px;
            text-indent: 12px;
            margin-right: 120px;
            line-height: 30px;
            width: 50px;
            height: 30px;
            /* color: #000; */
            outline: 2px solid #000;
            cursor: pointer;
            border: 1px solid lightyellow;
        }
        
        .count {
            font-size: 12px;
            border: 1px solid red;
            font-weight: bold;
            color: #000;
        }
        
        button:hover {
            background: lightskyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>留言内容：</h3>
        <div class="doc"></div>
        <textarea name="" id="" cols="30" rows="10" placeholder="请输入留言内容"></textarea>
        <button>发表留言</button>
    </div>

    <script>
        //需求：留言板
        /*
        //1.获取元素
        //2.给按钮绑定事件
        //3.获取留言内容
        // 4.创建元素，将内容放进去
        //5.将 创建的节点 添加到 doc
        
        */


        //1.获取元素
        var oBtn = document.querySelector('button');
        var oText = document.querySelector('textarea');
        var oDoc = document.querySelector('.doc');

        //2.给按钮绑定事件
        let index = 0;
        let flag = true;
        oBtn.onclick = function() {




            //3.获取留言内容
            var text = oText.value;
            // console.log(text);
            //4.创建元素，将内容放进去
            var oP = document.createElement('p');
            oP.innerHTML = "<p class=\"item\">" + "<span class=\".count\">" + "第" + (index + 1) + "次留言：</span>" + text + "<span class=\"delete_btn\">删除<span></p>";
            // oP.className = "item";
            //5.将 创建的节点 添加到 doc
            oDoc.appendChild(oP);
            index++;
            let item = $(".item");
            // console.log(item);
            item[index - 1].style.color = random_color(6);
            console.log(index);
            let delete_btn = $(".delete_btn");
            console.log(delete_btn);
            for (let i = 0; i < delete_btn.length; i++) {
                delete_btn[i].onclick = function() {
                    this.parentNode.parentNode.removeChild(this.parentNode);
                    index--;
                }
            }

            oText.value = "";
            // item.style.zIndex = "10";
        }


        //作业：优化 留言板
        /*
        1. 发表完浏览，请清空 文本框  必做
        2. 给 留言内容增加楼层号  必做
        3.给每层留言增加  删除功能 选做
        */
        // console.log(random_color(6));

        function random_color(n) {
            let color_arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
            let arr = [];
            for (let i = 0; i < n; i++) {
                let random = Math.floor(Math.random() * 15);
                arr.push(color_arr[random]);
            }
            let sum = "#";
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i];
            }
            return sum;
        }

        function $(select) {
            return document.querySelectorAll(select);
        }
    </script>
</body>

</html>